body {
  background-image: linear-gradient(-90deg,#1251AE 0,#0074FF 50%,#1251AE 100%);
  font-family: 'Roboto';
  font-size: 22px;
}

h1 {
  color: white;
  font-size: 2.5rem;
  font-weight: 500;
}

a,
a:visited,
a:hover {
  color: white;
}

.intro {
  text-align: center;
}

.intro p {
  display: inherit;
  color: #fff;
  font-size: 1rem;
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 20px;
}

form label {
  color: white;
}

.button-holder {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}

.status-text {
  display: inherit;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 400;
  line-height: 24px;
  margin: 3px;
}

.hunt-button {
  height: 35px;
  background: #003f80;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
  line-height: 35px;
  border-radius: 4px;
  width: 50%;
  color: white;
}

.hunt-button.disabled {
  background: #aaaaaa;
  cursor: not-allowed;
}

.exposes {
  display: grid;
  gap: 1.5rem;
}

.expose {
  border-radius: 5px;
  background: rgba(48, 130, 244, 0.6);

  text-align: center;
  text-decoration: none;

  display: grid;
  gap: inherit;
  padding: 1rem;
}
.expose:hover {
  text-decoration: none;
}

.expose h3,
.expose p,
.expose img {
  margin: 0;
}

.expose img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
}

.expose h3 {
  font-size: 1rem;
  font-weight: 300;
}

.expose p {
  font-size: 0.8rem;
}

@media (min-width: 576px) {
  .exposes {
    grid-template-columns: repeat(2, 1fr);
  }

  .expose {
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
}

@media (min-width: 992px) {
  .exposes {
    grid-template-columns: repeat(3, 1fr);
  }

  .expose {
    transition: all 0.25s ease;
  }
  .expose:hover {
    background: rgba(48, 130, 244, 1);
    transform: scale(1.05);
  }
}

div.center_button {
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  font-size: 16px;
  line-height: 20px;
  padding: 9px 21px 11px;
  border-radius: 20px;
  background-color: #54a9eb;
  border: none;
  color: #fff;
  cursor: pointer;
  vertical-align: top;
}

button.set_search_criteria {
  margin-top: 20px;
}

button.toggle_notification {
  margin-top: 20px;
  margin-left: 20px;
}

button.toggle_notification.enabled {
  background-color: red;
}

button.toggle_notification.disabled {
  background-color: green;
}

i.telegram_icon {
  background: url('data:image/svg+xml,%3Csvg%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m1.95617055%2011.392196c5.77764656-2.42328736%209.63031585-4.02086673%2011.55800785-4.79273807%205.5039525-2.20384954%206.6476266-2.5866818%207.3930574-2.59932314.1639507-.00278035.5305319.0363352.7679878.22182361.2005031.15662277.2556695.36819788.2820684.51669348.026399.1484956.0592719.48677234.0331404.75109194-.2982611%203.0169019-1.5888322%2010.33812718-2.2454015%2013.71710898-.2778191%201.4297738-.8288514%201.7357846-1.3584441%201.7826999-1.1509274.1019576-2.0208916-.5588425-3.1356211-1.2622918-1.7443316-1.1007592-2.3854935-1.3972358-4.0786694-2.4713734-1.95675765-1.2413519-.8891962-1.8911034.2259543-3.0061212.2918402-.2918054%205.3989024-4.83750096%205.497052-5.24030969.0122753-.05037796-.1557336-.55407742-.2716182-.65323489-.1158847-.09915747-.2869204-.06524947-.4103446-.03828214-.17495.03822537-2.9615423%201.81132342-8.35977698%205.31929412-.79096496.5228681-1.50739646.7776269-2.1492945.7642766-.70764107-.0147176-2.06885864-.3851791-3.08078398-.7018404-1.24116762-.388398-1.69932554-.5713149-1.61342745-1.2309348.04474105-.3435709.36011227-.7024173.94611366-1.0765391z%22%20fill%3D%22%23fff%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E') no-repeat 0 -1px;
  width: 24px;
  height: 22px;
  margin: 0px 13px -2px -7px;
  display: inline-block;
  color: #fff;
}

footer img {
  height: 20px;
  margin: 2px 5px 5px 5px;
}
